<template>
  <div class="home">
    <gltitle
      :is_mt="true"
      :is_notice="false"
      :is_back="true"
      :is_name="true"
      :title="title"
    ></gltitle>

    <div class="container">
      <ul class="tab_hd db">
        <li
          v-for="(item, k) in tabData"
          :key="k"
          @click="onTab(item, k)"
          :class="{ on: cid === item.id }"
        >
          {{ item.name }}
        </li>
      </ul>

      <div class="min">
        <div class="box-radius">
          <div class="empty db rel" style="z-index: 3" v-show="emptyShow">
            <div class="flexs">
              <van-empty
                class="custom-image"
                :image="require('../../assets/images/Group12.png')"
                :description="$t('page1.doc45')"
              />
            </div>
          </div>

          <van-pull-refresh
            v-model="refreshing"
            :success-text="$t('load.refreshed')"
            @refresh="onRefresh(0)"
            head-height="100"
            v-if="!emptyShow"
          >
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="$t('load.no_more')"
              :loading-text="$t('load.loading')"
              @load="onLoad"
              :immediate-check="check"
            >
              <ul class="list">
                <li
                  class="wrap bet"
                  @click="path_url('/my/help_view?id=' + item.id)"
                  v-for="(item, k) in datalist"
                  :key="k"
                >
                  <!-- <div class="n">{{ item.title }}</div>
            <van-icon name="arrow" /> -->
                  <div class="title">
                    <div class="pic">
                      <img src="../../assets/images/Group13.png" alt="" />
                      <div class="name">{{ item.title }}</div>
                    </div>
                    <!-- <div class="time">{{ item.time }}</div> -->
                  </div>
                </li>
              </ul>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      title: this.$t("title.doc42"),
      cid: "",
      tabData: [],
      datalist: [],
      loading: false,
      finished: false,

      totalPage: "",
      pageSize: 0,
      refreshing: false,
      emptyShow: false,
      datalistNum: 0,
      check: false,
    };
  },
  created() {
    // this.$post(this.URL.member.help_sub, {
    //   type:'HELP'
    // }).then((res) => {
    //   if (res.code == 0) {
    //     this.tabData = res.data
    //     this.cid = res.data[0].id
    //     this.onLoad()
    //   } else {
    //     this.$toast(res.message);
    //   }
    // });
  },
  mounted() {
    if (this.$store.state.helpID) {
      this.cid = this.$store.state.helpID;

      this.onLoad();
      this.init1();
    } else {
      this.init();
    }
    if (this.$store.state.helpIN) {
      this.indexs = this.$store.state.helpIN;
    }
  },
  methods: {
    ...mapMutations(["SET_HELPIN", "SET_HELPID"]),
    init() {
      this.$post(this.URL.member.help_sub, {
        type: "HELP",
      }).then((res) => {
        if (res.code == 0) {
          this.tabData = res.data;
          this.cid = res.data[0].id;
          this.SET_HELPID(this.cid);
          this.onLoad();
        } else {
          this.$toast(res.message);
        }
      });
    },
    init1() {
      this.$post(this.URL.member.help_sub, {
        type: "HELP",
      }).then((res) => {
        if (res.code == 0) {
          this.tabData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },

    onTab(item, index) {
      this.cid = item.id;
      this.indexs = index;
      this.SET_HELPIN(this.indexs);
      this.SET_HELPID(this.cid);

      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      this.pageSize = 0;
      this.totalPage = "";
      this.finished = false;
      this.loading = true;
      this.datalist = [];
      this.emptyShow = false;
      this.onLoad();
    },

    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.datalist = [];
          this.refreshing = false;
        }
        this.getlist();
      }, 1000);
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;

      this.pageSize = 0;
      this.totalPage = "";

      this.onLoad();
    },

    getlist() {
      this.pageSize = this.pageSize + 1;

      if (this.pageIndex == this.totalPage) {
        this.loading = false;
        this.finished = true;

        return;
      }

      this.$post(this.URL.member.help_list, {
        categoryId: this.cid,
        page: this.pageSize,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 0) {
          if (res.code == 2001) {
            this.loading = true;
            this.finished = false;
            this.emptyShow = true;
            return;
          }
          if (res.data.list.length == 0) {
            this.emptyShow = true;
          }
          this.totalPage = res.data.page.totalPage;
          this.pageIndex = res.data.page.index;

          this.datalistNum = res.data.page.count;

          let initData = res.data.list;
          this.datalist.push(...initData);
          this.loading = false;
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.box-radius {
  border-top: var(--COborder1);
  padding: 0.28rem 0.72rem;
  background: var(--CObackgroundLinear2);
  border-radius: 0rem 0rem 0.2rem 0.2rem;
  margin-bottom: 0.2rem;
  overflow: hidden;
}

.tab_hd {
  height: 0.94rem;
  background: var(--CObackgroundLinear2);
  border-radius: 0.48rem;
  text-align: center;
  margin: 0.2rem 0 0.4rem 0;
  font-size: 0.26rem;
  color: var(--COcolor3);
  li.on {
    color: var(--COcolor2);
  }
}
.min {
  min-height: 75vh;
}
.list {
  li {
    border-bottom: 0.02rem solid rgba(255, 255, 255, 0.1);
    padding: 0.28rem 0rem 0.26rem 0rem;
    font-size: 0.26rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 0.36rem;
    .title {
      .pic {
        margin-bottom: 0.16rem;
        display: flex;
        align-items: center;
        img {
          height: 0.32rem;
          margin-right: 0.08rem;
        }
        .name {
          font-size: 0.32rem;
          font-weight: 500;
          color: var(--COcolor3);
        }
      }
      .time {
        color: var(--COcolor1);
        margin-left: 0.48rem;
      }
    }
    &:last-child {
      border: 0;
    }
  }
}
</style>
